import React,{Component} from "react"

import { TabBar } from 'antd-mobile';

//这些都是图片
import home from "../../assets/images/home.png"
import selectedHome from "../../assets/images/home1.png"
import videoImg from "../../assets/images/viedo.png"
import selectvideoImg from "../../assets/images/viedo1.png"
import mySongImg from "../../assets/images/song.png"
import selectmySongImg from "../../assets/images/song1.png"
import mineImg from "../../assets/images/mine.png"
import selectmineImg from "../../assets/images/mine1.png"

//引入myview 页面
import View from "../view/View"
//视频子页面
import Video from "../video/Video" 
//我的 子页面
import MySongSheet from "../mysongsheet/MySongSheet"
//我的信息子页面
import Mine from "../mine/Mine"

class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'blueTab',
      
      fullScreen: true,
    };
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
      {/* pageText写一个就是渲染一次 */}
        <div style={{ paddingTop: 0 }}> {pageText}  </div>
        
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: "100% "}}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#d81e06"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="发现"
            key="Life"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+home+') center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+selectedHome+') center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'blueTab'}
           
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
            }}
            data-seed="logId"
          > 
            {/* 这里写的就是跳转过去的页面 */}
            {this.renderContent(<View />)}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+videoImg+') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+selectvideoImg+') center center /  21px 21px no-repeat' }}
              />
            }
            title="视频"
            key="Koubei"
            
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
            }}
            data-seed="logId1"
          >
            {this.renderContent(<Video />)}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+mySongImg+') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+selectmySongImg+') center center /  21px 21px no-repeat' }}
              />
            }
            title="我的"
            key="Friend"
           
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
            }}
          >
            {this.renderContent(< MySongSheet/>)}
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri:mineImg  }}
            selectedIcon={{ uri: selectmineImg  }}
            title="账号"
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
            }}
          >
            {this.renderContent(<Mine />)}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default TabBarExample